<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="动检通智慧云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>

    <title>牧中畜牧业大数据智慧云平台V1.0</title>


</head>
<body>
<!--顶部一级导航-->
<th:block th:replace="baseui/topheader :: topheader(1)"/>

<!--动检通菜单-->
<th:block th:replace="djt/partial/topnav :: topnav(4)"/>


<div id="cl-wrapper">
    <!--左边导航-->
    <th:block th:replace="djt/partial/inspector_left :: nav(1)"/>


    <div class="container-fluid" id="pcont">

        <div class="cl-mcont">

            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <div class="header"><h3>督察记录</h3></div>
                        <div class="content">
                            <div class="table-responsive">
                                <div id="datatable_wrapper"
                                     class="dataTables_wrapper form-inline dt-bootstrap no-footer">


                                    <div class="row">

                                        <!-- search-->
                                        <div class="row" style=" margin-left: 50px">
                                            <div style="white-space: nowrap">

                                                <div class="col-sm-2">
                                                    <div class="input-group date datetime col-md-5 col-xs-7"
                                                         data-min-view="2" data-date-format="yyyy-mm-dd">
                                                        <input id="start" class="form-control" style="width: 90px;"
                                                               size="16"
                                                               type="text" value="" placeholder="开始时间" readonly>
                                                        <span class="input-group-addon btn btn-primary"><span
                                                                class="glyphicon glyphicon-th"></span></span>
                                                    </div>
                                                </div>
                                                <div class="col-sm-2">
                                                    <div class="input-group date datetime col-md-5 col-xs-7"
                                                         data-min-view="2" data-date-format="yyyy-mm-dd">
                                                        <input id="end" class="form-control" style="width: 90px;"
                                                               size="16"
                                                               type="text" value="" placeholder="结束时间" readonly>
                                                        <span class="input-group-addon btn btn-primary"><span
                                                                class="glyphicon glyphicon-th"></span></span>
                                                    </div>


                                                </div>

                                                <div class="col-sm-2" style="width: 150px">
                                                    <select id="area" class="select2">
                                                        <option value="全部">所有区域</option>
                                                        <optgroup th:each="cityarea:${areaList}"
                                                                  th:label="${cityarea.city}">
                                                            <option th:each="regions:${cityarea.regions}"
                                                                    th:text="${regions}" th:value="${regions}"></option>
                                                        </optgroup>

                                                    </select>
                                                </div>



                                                <span style="margin-left: 50px">   畜种:
                                                           <select class="select2" style="max-width: 100px;"
                                                                   id="breedType">
                                                               <option value="0">全部</option>
                                                               <option value="1">猪 </option>
                                                               <option value="2">牛 </option>
                                                               <option value="3">羊 </option>
                                                               <option value="4">家禽</option>

                                                                 </select>

                                            </span>

                                            </div>
                                        </div>
                                        <div class="row" >
                                            <div style="white-space:nowrap;margin-left: 65px">
                                                <div class="col-sm-2" style="width: 150px">
                                                    <select id="name" class="select2">
                                                        <option value="0">选择督查人</option>
                                                        <option th:each="name:${nameList}"
                                                                th:text="${name}" th:value="${name}"></option>

                                                    </select>
                                                </div>
                                                <div class="col-sm-2" style="width: 150px">
                                                    <select id="breedfac" class="select2">
                                                        <option value="">选择养殖场</option>

                                                    </select>
                                                </div>
                                                <span style="margin-left: 40px">
                                          <button class="btn btn-primary" id="dtsearch"
                                          >搜索</button>
                                         </span>

                                            </div>


                                            <div class="row">
                                                <div class="col-sm-12">

                                                    <!-- Map -->
                                                    <div style="width:100%;height: 500px" id="allmap"></div>

                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/webjars/js/jquery.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>

<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript"
        src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="//cdn.bootcss.com/select2/3.4.5/select2.min.js" type="text/javascript"></script>

<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/webjars/js/laydate/laydate.js"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=RXWeiguHDrFql3fKp4LLxAsu38IKA1ZB"></script>

<script type="text/javascript">
    var PostDatas = {};
    $(document).ready(function () {

        App.init();
    })


</script>
<script type="text/javascript">

    var list = new Array();
    bddt = function () {
        $.ajax({
            type: "GET",
            url: "/djt/inspector/bddt",
            data: {},
            dataType: "json",
            async: false,
            success: function (data) {

                for (var key in data) {
                    $.each(data[key], function (index, item) {
                        var data_info = "";
                        data_info += "[" + isempty(item.supervisionRecords.localLongitude) + "," + isempty(item.supervisionRecords.localLatitude) + ","
                            + isempty(item.supervisionRecords.id) + "," +
                            isempty(item.supervisionRecords.status) + ",\"" +
                            isempty(item.supervisionRecords.userName) + "\",\"" +
                            isempty(item.supervisionRecords.breedFactoryName) + "\",\"" +
                            isempty(item.supervisionRecords.breedType) + "\",\"" +
                            isempty(item.supervisionRecords.stockQuantity) + "\",\"" +
                            isempty(item.supervisionRecords.ownerName) + "\",\"" +
                            isempty(item.supervisionRecords.animalCheckExecutionDetails) + "\",\"" +
                            isempty(item.supervisionRecords.harmlessTreatmentDetails) + "\",\"" +
                            isempty(item.supervisionRecords.pollutionControlDetails) +
                            "\"]";

                        list[list.length > index ? list.length : index] = JSON.parse(data_info);

                    })
                }

            }

        })
    }


    searchditu = function () {
        var opts = {
            width: 400,     // 信息窗口宽度
            height: 500,     // 信息窗口高度
            title: "信息窗口", // 信息窗口标题
            enableMessage: false//设置允许信息窗发送短息
        };
        bddt();
        if (list.length > 0) {
            for (var i = 0; i < list.length; i++) {
                var marker = new BMap.Marker(new BMap.Point(list[i][0], list[i][1]));
                marker.id = list[i][2];
                marker.status = list[i][3];
                marker.userName = list[i][4];
                marker.breedFactoryName = list[i][5];
                marker.breedType = list[i][6];
                marker.stockQuantity = list[i][7];
                marker.ownerName = list[i][8];
                marker.animalCheckExecutionDetails = list[i][9];
                marker.harmlessTreatmentDetails = list[i][10];
                marker.pollutionControlDetails = list[i][11];

                /*"<div class='map-box'>"+
                 "<div class='mapbox-top'>"+
                 "<div class='mapboxtop-left'>"+
                 "<div class='map-name'><span>企业名称：</span><span>"+e.target.factorydname+"</span></div>"+
                 "<div class='map-name'><span>企业地址：</span><span>"+e.target.factorydetail+"</span></div>"+
                 "<div class='map-name'><span>负责人：</span><span>"+e.target.devicehead+"</span></div>"+
                 "<div class='map-name'><span>联系方式：</span><span>"+e.target.devicephone+"</span></div>"+
                 "<div class='map-name'><span>存栏量：</span><span>"+e.target.stockQuantity+"</span></div>"+
                 "</div>"+
                 "<div class='mapboxtop-right'>视频监控</div>"+
                 "</div>"+
                 "<div>"+
                 "<header class='bottom-header'>液位实时数据</header>"+
                 "<table class='bottom-table' cellpadding='0' cellspacing='0'>"+
                 "<tr class='table-one'>"+
                 "<td>通道名称</td>"+
                 "<td>通道值</td>"+
                 "<td>状态</td>"+
                 "<td>历史数据</td>"+
                 "</tr>"+
                 "<tr>"+
                 "<td>"+  channel+"</td>"+
                 "<td>"+  value+"</td>"+
                 "<td>"+  status+"</td>"+
                 "<td><div class='map-look'><a href='/main/historyCollect1?factory_id="+e.target.factory_id+"'>查看</a></div></td>"+

                 "</tr>"+
                 "</table>"+
                 "</div>"+
                 "</div>";*/
                /*<div class="widget-content">
                 <ul class="list-group">
                 <li class="list-group-item" style="text-align: center"><span>养殖场名称:</span>
                 <span style="font-weight: bolder" th:text="${factory.breedFactory.name}"></span>
                 </li>*/
                var content = "<div class='widget-content'>" +
                    "<ul class='list-group'>" +
                    "<li class='list-group-item' style='text-align: center'><span>养殖场名称:</span>" +
                    "<span style='font-weight: bolder'>" + marker.breedFactoryName + "</span>" +"<br/>"+
                    "<span>养殖场编号:</span>" +
                    "<span style='font-weight: bolder'>" + marker.id + "</span>" +"<br/>"+
                    "<span>检查人名称:</span>" +
                    "<span style='font-weight: bolder'>" + marker.userName + "</span>" +"<br/>"+
                    "<span>养殖种类:</span>" +
                    "<span style='font-weight: bolder'>" + marker.breedType + "</span>" +"<br/>"+
                    "<span>存栏数:</span>" +
                    "<span style='font-weight: bolder'>" + marker.stockQuantity + "</span>" +"<br/>"+
                    "<span>负责人:</span>" +
                    "<span style='font-weight: bolder'>" + marker.ownerName + "</span>" +"<br/>"+
                    "<span>动物检查执行情况:</span>" +
                    "<span style='font-weight: bolder'>" + marker.animalCheckExecutionDetails + "</span>" +"<br/>"+
                    "<span>病死动物无害化处理情况:</span>" +
                    "<span style='font-weight: bolder'>" + marker.harmlessTreatmentDetails + "</span>>" +"<br/>"+
                    "<span>污染治理情况:</span>" +
                    "<span style='font-weight: bolder'>" + marker.pollutionControlDetails + "</span></li>" +
                    "</ul>"
                    "</div>";
                map.addOverlay(marker);
                addClickHandler(content, marker);
            }
        } else {
            var marker = new BMap.Marker(new BMap.Point(0, 0));
        }
        function addClickHandler(content, marker) {
            marker.addEventListener("click", function (e) {
                    openInfo(content, e)
                }
            );
        }

        function openInfo(content, e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        }

        data_info = "[";
    }

    function isempty(obj) {
        if (obj == null) {
            return "";
        } else if (obj == "") {
            return "";
        } else {
            return obj;
        }

    }


    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(112.20, 32.08), 13);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setCurrentCity("襄阳");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    (function () {
        searchditu();
    })()

    $("#dtsearch").click(function () {
            searchditu();
        }
    )
    $("#area").change(function () {
        $.ajax({
            type: "GET",
            url: "/djt/inspector/breedByRegion",
            data:{region:$("#area").val()},
            dataType: "json",
            success: function (data) {
                $("#breedfac").html("");
                $("#breedfac").append("<option value='0'>选择养殖场</option>");
                var str = "";
                /*<option value='0'>选择养殖场</option>*/
                $.each(data, function (index, item) {
                    str += "<option value="+item+">"+item+"</option>";
                    $("#breedfac").append(str);
                    str = "";
                })
            }
        })

    })
</script>


</body>
</html>
